<template>
  <div style="padding: 25px 25px 0;">

    <!--    面包屑-->
    <el-breadcrumb separator="/" style="margin-bottom: 12px">
      <el-breadcrumb-item :to="{ path: '/' }">我的主页</el-breadcrumb-item>
      <el-breadcrumb-item>环境数据</el-breadcrumb-item>
    </el-breadcrumb>

    <!--    远程连接和控制-->
    <div style="margin: 0 0 10px 0">
      <div style="margin-bottom: 10px;border-bottom: 1px solid #e1e5f2">
        <div style="margin-bottom: 2px;min-width: 290px">
          <span style="font-weight: normal;color: #464646;font-size: 20px;">远 程 连 接</span>
        </div>
      </div>
      <el-row :gutter="10">
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}" style="cursor: pointer">
            <div style="display: flex">
              <div class="info">
                <div class="title">远程连接</div>
                <img class="img" :src="require('@/assets/connect.png')">
              </div>
              <div class="switch">
                <el-switch v-model="webSocketStatus" @change="webSocketSwitch"></el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}" style="cursor: pointer">
            <div style="display: flex">
              <div class="info">
                <div class="title">灯光自动</div>
                <img class="img" :src="require('@/assets/lamp.png')">
              </div>
              <div class="switch">
                <el-switch v-model="lightAutoStatus" @change="lightAutoSwitch"></el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}" style="cursor: pointer">
            <div style="display: flex">
              <div class="info">
                <div class="title">灯光开关</div>
                <img class="img" :src="require('@/assets/light-on.png')">
              </div>
              <div class="switch">
                <el-switch v-model="lightStatus" @change="lightSwitch"></el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}" style="cursor: pointer">
            <div style="display: flex">
              <div class="info">
                <div class="title">风扇自动</div>
                <img class="img" :src="require('@/assets/vent.png')">
              </div>
              <div class="switch">
                <el-switch v-model="ventAutoStatus" @change="ventAutoSwitch"></el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}" style="cursor: pointer">
            <div style="display: flex">
              <div class="info">
                <div class="title">风扇开关</div>
                <img class="img" :src="require('@/assets/vent-on.png')">
              </div>
              <div class="switch">
                <el-switch v-model="ventStatus" @change="ventSwitch"></el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!--    远程监测-->
    <div style="margin: 0 0 10px 0">
      <div style="margin-bottom: 10px;border-bottom: 1px solid #e1e5f2">
        <div style="margin-bottom: 2px;min-width: 290px">
          <span style="font-weight: normal;color: #464646;font-size: 20px;">远 程 监 测</span>
        </div>
      </div>
      <el-row :gutter="10">
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}">
            <div style="display: flex">
              <div class="info">
                <div class="title">实时温度</div>
                <img class="img" :src="require('@/assets/temp.png')">
              </div>
              <div class="num">{{ tempValue }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}">
            <div style="display: flex">
              <div class="info">
                <div class="title">实时湿度</div>
                <img class="img" :src="require('@/assets/humi.png')">
              </div>
              <div class="num">{{ humiValue }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}">
            <div style="display: flex">
              <div class="info">
                <div class="title">烟雾数据</div>
                <img class="img" :src="require('@/assets/smog.png')">
              </div>
              <div class="num">{{ smogValue }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}">
            <div style="display: flex">
              <div class="info">
                <div class="title">光强数据</div>
                <img class="img" :src="require('@/assets/light.png')">
              </div>
              <div class="num">{{ lightValue }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="4" :md="8" :sm="12" :xs="24">
          <el-card :style="{height:'150px'}">
            <div style="display: flex">
              <div class="info">
                <div class="title">噪音数据</div>
                <img class="img" :src="require('@/assets/sound.png')">
              </div>
              <div class="num">{{ soundValue }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Office",
  props: ['user'],
  data() {
    return {
      websocket: '',
      message: '',
      tempValue: 0,
      humiValue: 0,
      smogValue: 0,
      lightValue: 0,
      soundValue: 0,
      webSocketStatus: false,
      lightAutoStatus: false,
      lightStatus: false,
      ventAutoStatus: false,
      ventStatus: false,
    }
  },
  methods: {
    webSocketSwitch(e) {
      if (e) {
        this.websocket = new WebSocket('ws://localhost:8080/webSocket')
        this.$message.success("连接成功");
        this.initWebSocket()
      } else {
        this.closeWebSocket()
      }
    },
    //灯光自动
    lightAutoSwitch(e) {
      if (this.webSocketStatus) {
        if (e) {
          this.message = "%a1*"
          console.log("灯光自动开启")
        } else {
          this.message = "%a2*"
          console.log("灯光自动关闭")
        }
        this.sendMqtt()
      } else {
        this.$message.warning("请先进行远程连接!")
        this.lightAutoStatus = false
      }
    },
    //灯光开关
    lightSwitch(e) {
      if (this.webSocketStatus) {
        if (e) {
          this.message = "%a3*"
          console.log("灯光开关开启")
        } else {
          this.message = "%a4*"
          console.log("灯光开关关闭")
        }
        this.sendMqtt()
      } else {
        this.$message.warning("请先进行远程连接!")
        this.lightStatus = false
      }
    },
    //通风自动
    ventAutoSwitch(e) {
      if (this.webSocketStatus) {
        if (e) {
          this.message = "%b1*"
          console.log("通风自动开启")
        } else {
          this.message = "%b2*"
          console.log("通风自动关闭")
        }
        this.sendMqtt()
      } else {
        this.$message.warning("请先进行远程连接!")
        this.ventAutoStatus = false
      }
    },
    //通风开关
    ventSwitch(e) {
      if (this.webSocketStatus) {
        if (e) {
          this.message = "%b3*"
          console.log("通风开关开启")
        } else {
          this.message = "%b4*"
          console.log("通风开关关闭")
        }
        this.sendMqtt()
      } else {
        this.$message.warning("请先进行远程连接!")
        this.ventStatus = false
      }
    },
    //发送控制信息
    sendMqtt() {
      request.post("/mqtt/send", {
        params: {
          message: this.message
        }
      }).then(res => {
        if (res.code === '0') {
          this.$message.success("已发送远程控制")
        } else {
          this.$message.error("控制失败")
        }
      })
    },
    //通过websocket的方式向后端消息
    sendMessage(message) {
      this.websocket.send(message);
    }
    ,
    //webSocket初始化函数
    initWebSocket() {
      // 连接错误
      this.websocket.onerror = this.setErrorMessage
      // 连接成功
      this.websocket.onopen = this.setOnopenMessage
      // 收到消息的回调
      this.websocket.onmessage = this.setOnmessageMessage
      // 连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage
      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
    }
    ,
    setErrorMessage() {
      this.webSocketStatus = false
      this.closeWebSocket()
      this.$message.error("远程连接发生错误")
    }
    ,
    setOnopenMessage() {
      //WebSocket连接成功自动调用该方法，修改连接websocket状态为true
      this.webSocketStatus = true
    }
    ,
    setOnmessageMessage(msg) {
      console.log('服务端返回：' + msg.data)
      let data = JSON.parse(msg.data)
      this.tempValue = data.temp
      this.humiValue = data.humi
      this.lightValue = data.light
      this.smogValue = data.smog
      this.soundValue = data.sound
    }
    ,
    setOncloseMessage() {
      this.closeAllStatus()
      this.$message.warning("远程连接关闭")
    }
    ,
    onbeforeunload() {
      this.closeWebSocket()
    }
    ,
    closeWebSocket() {
      this.websocket.close()
      this.closeAllStatus()
    }
    ,
    closeAllStatus() {
      this.tempValue = 0
      this.humiValue = 0
      this.lightValue = 0
      this.smogValue = 0
      this.soundValue = 0
    }
    ,
  }
}
</script>

<style scoped>
.info {
  width: 40%;
  align-items: center;
}

.title {
  margin-left: 5px;
  font-weight: bold;
  font-size: 15px;
}

.num {
  font-weight: bold;
  font-size: 30px;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  margin-top: 20px;
  width: 70px;
  height: 70px;
}

</style>